<html>
<head>
<title>starter.md</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #cf8e6d;}
.s1 { color: #bcbec4;}
.s2 { color: #bcbec4;}
.s3 { color: #7a7e85;}
.s4 { color: #d5b778;}
.s5 { color: #bababa;}
.s6 { color: #6aab73;}
</style>
</head>
<body bgcolor="#1e1f22">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
starter.md</font>
</center></td></tr></table>
<pre><span class="s0"># </span><span class="s2">Starter</span>

<span class="s3">&lt;!--Writerside adds this topic when you create a new documentation project.</span>
<span class="s3">You can use it as a sandbox to play with Writerside features, and remove it from the TOC when you don't need it anymore.--&gt;</span>

<span class="s0">## </span><span class="s2">Add new topics</span>
<span class="s2">You can create empty topics, or choose a template for different types of content that contains some boilerplate structure to help you get started</span><span class="s1">:</span>

<span class="s1">![</span><span class="s2">Create new topic options</span><span class="s1">](</span><span class="s2">new_topic_options.png</span><span class="s1">)</span><span class="s2">{ width=290 }{border-effect=line}</span>

<span class="s0">## </span><span class="s2">Write content</span>
<span class="s2">%product% supports two types of markup</span><span class="s1">: </span><span class="s2">Markdown and XML.</span>
<span class="s2">When you create a new help article, you can choose between two topic types, but this doesn't mean you have to stick to a single format.</span>
<span class="s2">You can author content in Markdown and extend it with semantic attributes or inject entire XML elements.</span>

<span class="s0">## </span><span class="s2">Inject XML</span>
<span class="s2">For example, this is how you inject a procedure</span><span class="s1">:</span>

<span class="s4">&lt;procedure </span><span class="s5">title</span><span class="s6">=&quot;Inject a procedure&quot; </span><span class="s5">id</span><span class="s6">=&quot;inject-a-procedure&quot;</span><span class="s4">&gt;</span>
    <span class="s4">&lt;step&gt;</span>
        <span class="s4">&lt;p&gt;</span><span class="s2">Start typing and select a procedure type from the completion suggestions:</span><span class="s4">&lt;/p&gt;</span>
        <span class="s4">&lt;img </span><span class="s5">src</span><span class="s6">=&quot;completion_procedure.png&quot; </span><span class="s5">alt</span><span class="s6">=&quot;completion suggestions for procedure&quot; </span><span class="s5">border-effect</span><span class="s6">=&quot;line&quot;</span><span class="s4">/&gt;</span>
    <span class="s4">&lt;/step&gt;</span>
    <span class="s4">&lt;step&gt;</span>
        <span class="s4">&lt;p&gt;</span><span class="s2">Press </span><span class="s4">&lt;shortcut&gt;</span><span class="s2">Tab</span><span class="s4">&lt;/shortcut&gt; </span><span class="s2">or </span><span class="s4">&lt;shortcut&gt;</span><span class="s2">Enter</span><span class="s4">&lt;/shortcut&gt; </span><span class="s2">to insert the markup.</span><span class="s4">&lt;/p&gt;</span>
    <span class="s4">&lt;/step&gt;</span>
<span class="s4">&lt;/procedure&gt;</span>

<span class="s0">## </span><span class="s2">Add interactive elements</span>

<span class="s0">### </span><span class="s2">Tabs</span>
<span class="s2">To add switchable content, you can make use of tabs </span><span class="s1">(</span><span class="s2">inject them by starting to type `tab` on a new line</span><span class="s1">):</span>

<span class="s4">&lt;tabs&gt;</span>
    <span class="s4">&lt;tab </span><span class="s5">title</span><span class="s6">=&quot;Markdown&quot;</span><span class="s4">&gt;</span>
        <span class="s4">&lt;code-block </span><span class="s5">lang</span><span class="s6">=&quot;plain text&quot;</span><span class="s4">&gt;</span><span class="s2">![Alt Text](new_topic_options.png){ width=450 }</span><span class="s4">&lt;/code-block&gt;</span>
    <span class="s4">&lt;/tab&gt;</span>
    <span class="s4">&lt;tab </span><span class="s5">title</span><span class="s6">=&quot;Semantic markup&quot;</span><span class="s4">&gt;</span>
        <span class="s4">&lt;code-block </span><span class="s5">lang</span><span class="s6">=&quot;xml&quot;</span><span class="s4">&gt;</span>
            <span class="s2">&lt;![CDATA[</span><span class="s4">&lt;img </span><span class="s5">src</span><span class="s6">=&quot;new_topic_options.png&quot; </span><span class="s5">alt</span><span class="s6">=&quot;Alt text&quot; </span><span class="s5">width</span><span class="s6">=&quot;450px&quot;</span><span class="s4">/&gt;</span><span class="s2">]]&gt;</span><span class="s4">&lt;/code-block&gt;</span>
    <span class="s4">&lt;/tab&gt;</span>
<span class="s4">&lt;/tabs&gt;</span>

<span class="s0">### </span><span class="s2">Collapsible blocks</span>
<span class="s2">Apart from injecting entire XML elements, you can use attributes to configure the behavior of certain elements.</span>
<span class="s2">For example, you can collapse a chapter that contains non-essential information</span><span class="s1">:</span>

<span class="s0">#### </span><span class="s2">Supplementary info {collapsible=</span><span class="s1">&quot;</span><span class="s2">true</span><span class="s1">&quot;</span><span class="s2">}</span>
<span class="s2">Content under a collapsible header will be collapsed by default,</span>
<span class="s2">but you can modify the behavior by adding the following attribute</span><span class="s1">:</span>
<span class="s2">`default-state=</span><span class="s1">&quot;</span><span class="s2">expanded</span><span class="s1">&quot;</span><span class="s2">`</span>

<span class="s0">### </span><span class="s2">Convert selection to XML</span>
<span class="s2">If you need to extend an element with more functions, you can convert selected content from Markdown to semantic markup.</span>
<span class="s2">For example, if you want to merge cells in a table, it's much easier to convert it to XML than do this in Markdown.</span>
<span class="s2">Position the caret anywhere in the table and press </span><span class="s1">&lt;shortcut&gt;</span><span class="s2">Alt+Enter</span><span class="s1">&lt;/shortcut&gt;:</span>

<span class="s4">&lt;img </span><span class="s5">src</span><span class="s6">=&quot;convert_table_to_xml.png&quot; </span><span class="s5">alt</span><span class="s6">=&quot;Convert table to XML&quot; </span><span class="s5">width</span><span class="s6">=&quot;706&quot; </span><span class="s5">border-effect</span><span class="s6">=&quot;line&quot;</span><span class="s4">/&gt;</span>

<span class="s0">## </span><span class="s2">Feedback and support</span>
<span class="s2">Please report any issues, usability improvements, or feature requests to our</span>
<span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://youtrack.jetbrains.com/newIssue?project=WRS&quot;</span><span class="s4">&gt;</span><span class="s2">YouTrack project</span><span class="s4">&lt;/a&gt;</span>
<span class="s2">(you will need to register).</span>

<span class="s2">You are welcome to join our</span>
<span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://jb.gg/WRS_Slack&quot;</span><span class="s4">&gt;</span><span class="s2">public Slack workspace</span><span class="s4">&lt;/a&gt;</span><span class="s2">.</span>
<span class="s2">Before you do, please read our [Code of conduct](https://plugins.jetbrains.com/plugin/20158-writerside/docs/writerside-code-of-conduct.html).</span>
<span class="s2">We assume that you’ve read and acknowledged it before joining.</span>

<span class="s2">You can also always email us at </span><span class="s1">[</span><span class="s2">writerside@jetbrains.com</span><span class="s1">](</span><span class="s2">mailto</span><span class="s1">:</span><span class="s2">writerside@jetbrains.com</span><span class="s1">)</span><span class="s2">.</span>

<span class="s4">&lt;seealso&gt;</span>
    <span class="s4">&lt;category </span><span class="s5">ref</span><span class="s6">=&quot;wrs&quot;</span><span class="s4">&gt;</span>
        <span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://plugins.jetbrains.com/plugin/20158-writerside/docs/markup-reference.html&quot;</span><span class="s4">&gt;</span><span class="s2">Markup reference</span><span class="s4">&lt;/a&gt;</span>
        <span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://plugins.jetbrains.com/plugin/20158-writerside/docs/manage-table-of-contents.html&quot;</span><span class="s4">&gt;</span><span class="s2">Reorder topics in the TOC</span><span class="s4">&lt;/a&gt;</span>
        <span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://plugins.jetbrains.com/plugin/20158-writerside/docs/local-build.html&quot;</span><span class="s4">&gt;</span><span class="s2">Build and publish</span><span class="s4">&lt;/a&gt;</span>
        <span class="s4">&lt;a </span><span class="s5">href</span><span class="s6">=&quot;https://plugins.jetbrains.com/plugin/20158-writerside/docs/configure-search.html&quot;</span><span class="s4">&gt;</span><span class="s2">Configure Search</span><span class="s4">&lt;/a&gt;</span>
    <span class="s4">&lt;/category&gt;</span>
<span class="s4">&lt;/seealso&gt;</span></pre>
</body>
</html>